body {
    font-family: Arial, sans-serif; /* 设定全局字体 */
    background-color: #f0f0f0; /* 背景颜色 */
    margin: 0;
    padding: 0;
}

#center {
    width: 300px; /* 固定宽度，便于控制布局 */
    margin: 50px auto; /* 自动水平居中，并设置顶部和底部的外边距 */
    padding: 20px; /* 内边距，使内容不紧贴边框 */
    background-color: #ffffff; /* 背景颜色设为白色 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    text-align: center; /* 文本居中 */
}

#center form {
    display: inline-block; /* 使表单可以水平居中 */
    text-align: left; /* 表单内部文本左对齐 */
}

#center input[type="text"],
#center input[type="password"] {
    width: calc(100% - 22px); /* 宽度为父容器的100%减去左右内边距 */
    padding: 10px; /* 内边距 */
    margin: 10px 0; /* 外边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角 */
    box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
}

#center input[type="reset"],
#center input[type="submit"] {
    width: 48%; /* 宽度为父容器的48%，便于两个按钮并排 */
    padding: 10px; /* 内边距 */
    margin: 10px 1%; /* 外边距，确保两个按钮之间有间距 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 圆角 */
    color: #ffffff; /* 文字颜色 */
    background-color: #007BFF; /* 背景颜色 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: background-color 0.3s; /* 背景颜色渐变效果 */
}

#center input[type="reset"]:hover,
#center input[type="submit"]:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

#center span {
    color: red; /* 错误信息颜色 */
    display: block; /* 错误信息独占一行 */
    margin-top: 10px; /* 与表单元素之间的间距 */
}